<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!-- 导航栏开始 -->
<div class="nav">
    <ul>
        <li>
            <a href="#">导航菜单制作 </a>
            <ul class="a1">
            <li><a href="./键盘焦点.html">键盘焦点</a>
            <li><a href="./billbill效果.html">billbill效果</a>
        </li>
        </ul>
        <li>
            <a href="#">浮动定位</a>
            <ul class="b">
                <li><a href="./浮动.html">浮动</a></li>
                    <li><a href="./浮动1.html">浮动1</a></li>
                        <li><a href="./浮动2.html">浮动2</a></li>
                        <li><a href="./浮动3.html">浮动3</a></li>
        </li>
        </ul>
        <li>
            <a href="#">购物车图标</a>
            <ul class="c">
            <li><a href="./购物车.html">购物车</a>
        </li>
        </ul>
        <li>
            <a href="#">CSS动画</a>
            <ul class="d">
            <li><a href="./2D效果.html">2D效果</a>
            <li><a href="./3D效果.html">3D效果</a>
            <li><a href="./动画.html">动画</a>
            <li><a href="./立方体.html">立方体</a>
        </li>
    </ul>
    <li>
        <a href="../主页.html">首页</a>
    </li>
    </ul>
</ul>
</div>
<!-- 导航css开始 -->
<style>
    .nav{
      width: 625px;
      height: 50px;
      margin-top: 1%;
      margin-left: 33%;
      background-color:rgba(0, 0, 0, 0.507);
  }
  ul{
      margin-top: 0px;
      padding-inline-start: 0%;
  }
  .nav>ul>li{
      float: left;
      list-style: none;
      text-align: center;
      height: 50px;
      line-height: 50px;
      width: 125px;
      font-size: 15px;
      font-family: 微软雅黑;
  }
  a{
      color: rgb(255, 255, 255);
      text-decoration: none;
  }
  ul>li:hover{
      background-color:rgb(0, 0, 0);
  }
  .a1{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.a1{
      display: block;
  }
  .b{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.b{
      display: block;
  }
  .c{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.c{
      display: block;
  }
  .d{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.d{
      display: block;
  }
  </style>
  <!-- 导航栏结束 -->
  <!-- 图片效果开始 -->
<body>
	<div class="con"> 
        <a div class="item">
            <img src="../img/人.jpg" alt="">
        </a>
        <a div class="play-btn"></a>
        <a div class="mask">
            <h3>hihihi</h3>
            <p>hihihihihi</p>
        </a>
    </div>
    <!-- 图片css开始 -->
<style>
    a{
        text-decoration: none;
        display: block;
    }
    .con{
        position: relative;
        width: 410px;
        margin: 2% 0%;
    }
    .con .item{
        width: 100%;
        height: 100%;
    }
    .con .item img{
        width: 100%;
    }
    .play-btn {
        opacity: 0;
        position: absolute;
        width: 56px;
        height: 56px;
        right: 10%;
        bottom: 10%;
        background: url(../img/播放.png) no-repeat center center;
        transition: opacity 1s ease-in-out;
    }
    .con:hover .play-btn{
        opacity: 1;
    }
    .mask{
        width: 100%;
        height: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.481);
        position: absolute;
        transition: height .4s ease-in-out;
        overflow: hidden;
    }
    .con:hover .mask{
        height: 100%;
    }
</style>
</body>
</html>
